<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="obj.hobby = { eat: '🍜' }">update eat</button>
</template>

<script>
import { watch, ref, reactive, isReactive } from 'vue'
export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    // 思考题：下面监听的是 reactive 内部数据的变化，上面对 obj.hobby 的直接修改其实并不会触发监听
    watch(obj.value.hobby, (newValue) => {
      console.log(newValue)
    })
    return { obj }
  },
}
</script>
